<template>
  <el-row :gutter="15">
    <el-col :span="11">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>阈值设置</span>
          </div>
        </template>
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="CPU占用率">
            <el-input placeholder="请输入CPU占用率" v-model="cpuUsage" ref="_cpuUsage" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="内存占用率">
            <el-input placeholder="请输入内存占用率" v-model="memoryUsage" ref="_memoryUsage" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="硬盘占用率">
            <el-input placeholder="请输入硬盘占用率" v-model="diskUsage" ref="_diskUsage" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="功耗">
            <el-input placeholder="请输入功耗" v-model="powerWaste" ref="_powerWaste" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="温度">
            <el-input placeholder="请输入温度" v-model="sensorTemperature" ref="_sensorTemperature" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="电压">
            <el-input placeholder="请输入电压" v-model="sensorVoltage" ref="_sensorVoltage" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>SNMP设置</span>
          </div>
        </template>
        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item label="IP">
            <el-input placeholder="请输入IP" v-model="ip" ref="_ip" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="更新间隔">
            <el-input placeholder="请输入CPU占用率" v-model="interval" ref="_interval" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :span="5">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>页面数据更新</span>
          </div>
        </template>
        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item label="更新间隔">
            <el-input placeholder="请输入CPU占用率" v-model="updateInterval" ref="_updateInterval" size="small">
              <template #append>%</template>
            </el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup(){
        const cpuUsage = ref('80');
        const memoryUsage = ref('60');
        const diskUsage = ref('');
        const powerWaste = ref('');
        const sensorTemperature = ref('');
        const sensorVoltage = ref('');
        const ip = ref('');
        const interval = ref('');
        const updateInterval = ref('');

        return {
            cpuUsage,
            memoryUsage,
            diskUsage,
            powerWaste,
            sensorTemperature,
            sensorVoltage,
            ip,
            interval,
            updateInterval
        }
    }
});
</script>

<style>
</style>